<template>
  <div class="songs-container">
    <div class="page-header">
      <h1>歌曲管理</h1>
      <el-button type="primary" @click="navigateToCreate">添加新歌曲</el-button>
    </div>
    
    <el-table :data="songs" style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="title" label="标题" width="180" />
      <el-table-column prop="singer" label="歌手" width="150" />
      <el-table-column prop="composer" label="作曲" width="150" />
      <el-table-column prop="lyricist" label="作词" width="150" />
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === '已发布' ? 'success' : 'info'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handlePreview(scope.row)">预览</el-button>
          <el-button 
            type="text" 
            size="small" 
            :type="scope.row.status === '已发布' ? 'danger' : 'success'"
            @click="handlePublishToggle(scope.row)"
          >
            {{ scope.row.status === '已发布' ? '下架' : '发布' }}
          </el-button>
          <el-button type="text" size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const loading = ref(false);

// Mock song data
const songs = ref([
  {
    id: 1,
    title: '月半小夜曲',
    singer: '李克勤',
    composer: '邰正宵',
    lyricist: '林振强',
    createTime: '2023-05-20 12:30:45',
    status: '已发布'
  },
  {
    id: 2,
    title: '一生中最爱',
    singer: '谭咏麟',
    composer: '谭咏麟',
    lyricist: '潘源良',
    createTime: '2023-05-21 10:15:22',
    status: '草稿'
  },
  {
    id: 3,
    title: '喜欢你',
    singer: 'Beyond',
    composer: '黄家驹',
    lyricist: '黄家驹',
    createTime: '2023-05-22 09:05:11',
    status: '已发布'
  }
]);

const navigateToCreate = () => {
  // This should navigate to song creation page
  ElMessage.info('跳转到创建歌曲页面');
};

const handleEdit = (row) => {
  ElMessage.info(`编辑歌曲: ${row.title}`);
};

const handlePreview = (row) => {
  ElMessage.info(`预览歌曲: ${row.title}`);
};

const handlePublishToggle = (row) => {
  const action = row.status === '已发布' ? '下架' : '发布';
  ElMessageBox.confirm(`确认${action}歌曲 "${row.title}"?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    row.status = row.status === '已发布' ? '草稿' : '已发布';
    ElMessage.success(`歌曲${action}成功`);
  }).catch(() => {
    ElMessage.info('已取消操作');
  });
};

const handleDelete = (row) => {
  ElMessageBox.confirm(`确认删除歌曲 "${row.title}"?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    songs.value = songs.value.filter(item => item.id !== row.id);
    ElMessage.success('删除成功');
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};
</script>

<style scoped>
.songs-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
}
</style> 